<template>
    <div>
        <div id="statistics" :style="{width: '100%', height: '500px'}"></div>
    </div>
</template>

<script>
    import "../../assets/js/echarts.min";

    export default {
        data() {
            return {
                ky_count:'',
                zb_count:'',
                xw_count:'',
                total:'',
            }
        },
        mounted() {
            this.a();
        },
        methods: {
            a(){
                this.$axios({
                    method: 'GET',
                    url: 'http://bigdata-api.huimeimt.cn/resource_server/newsmdm/news_type_count?access_token=0b58e946-72ae-4790-a3c5-8466f7579ee7',
                }).then((res) => {
                    this.ky_count = res.data.result[0].ky_count;
                    this.zb_count = res.data.result[0].zb_count;
                    this.xw_count = res.data.result[0].xw_count;
                    this.total = res.data.result[0].total;
                    this.myChart();
                });
            },
            myChart() {
                let option = {
                    title : {
                        subtext: '',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data:['科研资金','招标信息','新闻资讯']
                    },
                    series : [
                        {
                            name: '',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            center: ['50%', '60%'],
                            data:[
                                {value:this.ky_count, name:'科研资金'},
                                {value:this.zb_count, name:'招标信息'},
                                {value:this.xw_count, name:'新闻资讯'},
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                let myChart = this.$echarts.init(document.getElementById('statistics'));
                myChart.setOption(option);
            }
        }
    }
</script>

<style scoped>

</style>
